<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="content">
            <div class="top-title">添加员工</div>
            <div class="title">基础信息</div>
            <el-form :model="form" label-width="100px" ref="form" label-position="right" :rules="rules">
                <el-row :gutter="41">
                    <el-col :span="10">
                        <el-form-item label="用户名" prop="account">
                            <el-popover placement="top-start" trigger="focus" content="字符长度小于20个字符">
                                <el-input slot="reference" v-model="form.account" :minlength="1" :maxlength="20" placeholder="请输入用户名"></el-input>
                            </el-popover>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <span class="describe">员工登录使用，不可重复；可支持中英文，数字。</span>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="10">
                        <el-form-item label="真实姓名" prop="userName">
                            <el-popover placement="top-start" trigger="focus" content="字符长度大于2个小于10个汉字">
                                <el-input slot="reference" v-model="form.userName" :minlength="2" :maxlength="10" placeholder="请输入真实姓名"></el-input>
                            </el-popover>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41" class='input-hidden'>
                    <el-col :span="10">
                        <el-input name="old-userName" type="text" disabled ></el-input>
                        <el-input name="old-pwd" type="password" disabled ></el-input>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="10">
                        <el-form-item label="绑定手机号" prop="phone">
                            <el-input v-model="form.phone" auto-complete="off" :maxlength="11" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="10">
                        <el-form-item label="密码" prop="password">
                            <el-input type="password" v-model="form.password" :maxlength="16" auto-complete="off" placeholder="请输入初始密码"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <span class="describe">由6~16位英文或数字所组成。</span>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="10">
                        <el-form-item label="确认密码" prop="confirmPassword">
                            <el-input type="password" v-model="form.confirmPassword" :maxlength="16" auto-complete="off" placeholder="请输入确认密码"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="10">
                        <el-form-item label="角色" prop="roleId">
                            <el-select v-model="form.roleId" placeholder="请选择角色" style="width:100%">
                                <el-option v-for="item in roleList" :key="item.pId" :label="item.sName" :value="item.pId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <span class="describe">可在权限管理模块增、删、改、查角色名称以及角色权限。</span>
                    </el-col>
                </el-row>
        </el-form>
        <div class="title">负责区域</div>
        <el-checkbox-group v-model="checkName">
            <el-checkbox v-for="item in checkList" :key="item.id" :label="item.region"></el-checkbox>
        </el-checkbox-group>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="confirm('form')">确 定</el-button>
        </div>
        </div>
    </div>
</template>
<script>
import Levelbar from '../../layout/Levelbar';
import { getAgentRoleList, findAgentRegion, addAgentStaff} from 'api/userManage';
import validate from '@/utils/validate';
import sha256 from 'sha256';
export default {
    name: 'newUser',
    components: {
        Levelbar
    },
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                // let pass = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
                let pass = /^[0-9a-zA-Z]{6,16}$/;
                if (!pass.test(value)) {
                    callback(new Error('密码格式不正确，密码由6~16位英文或数字所组成'));
                }
                if (this.form.confirmPassword !== '') {
                    this.$refs.form.validateField('confirmPassword');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.form.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            form: {
                password: '',
                confirmPassword: '',
                roleId: '',
                // 传递给后台的数组
                orgUserRegionMaps: []
            },
            // 展示负责区域列表
            checkList: [],
            // 负责区域列表 name
            checkName: [],
            // 角色集合
            roleList: [],
            rules: {
                account: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在20个字符內', trigger: 'blur' },
                    /**
                     * 正则及正则提示修改 by cuihd 20180531
                     */
                    {
                        pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]+[\u4e00-\u9fa5a-zA-Z0-9\-_]*$/,
                        message: '请勿输入空格或特殊字符'
                    }
                ],
                userName: [
                    { required: true, message: '请输入真实姓名', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
                    { pattern: /^[\u4E00-\u9FA5]+$/, message: '请输入中文姓名' }
                ],
                phone: [...validate.phoneRequired()],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { validator: validatePass, trigger: 'blur' },
                    { pattern: /^[^ ]+$/, message: '请勿输入空格', trigger: 'change'}
                ],
                confirmPassword: [
                    { required: true, message: '请再次输入密码', trigger: 'blur' },
                    { validator: validatePass2, trigger: 'blur' }
                ],
                roleId: [
                    { required: true, message: '请选择角色', trigger: 'change' }
                ]
            }
        };
    },
    created() {
        this.getInof();
        this.getAgentRegion()
    },
    methods: {
        // 获取角色
        getInof() {
            getAgentRoleList().then(data => {
                this.roleList = data.data.content;
                this.roleList.unshift({sName: '请选择', pId: ''})
            })
        },
        // 获取代理商信息列表
        getAgentRegion() {
            findAgentRegion().then(data => {
                this.checkList = data.data.content;
                this.checkList.forEach(item => {
                    this.checkName.push(item.region)
                })
            })
        },
    // 取消
        cancel() {
            this.$router.go(-1)
        },
    // 确认
        confirm(form) {
            this.$refs[form].validate((valid) => {
                if (valid) {
                    this.$confirm('确认添加?', ' ', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: ' '
                    }).then(() => {
                        this.checkList.forEach(item => {
                            this.checkName.forEach(val => {
                                if (item.region == val) {
                                    this.form.orgUserRegionMaps.push(item)
                                } 
                            })
                        });
                        /**
                         * 密码加密 by cuihd 20180531
                         */
                        let pwdSha256 = sha256(this.form.password);
                        let confirmPwdSha256 = sha256(this.form.confirmPassword);
                        addAgentStaff(
                            this.form.account,
                            this.form.userName,
                            pwdSha256,
                            confirmPwdSha256,
                            this.form.phone,
                            this.form.roleId,
                            this.form.orgUserRegionMaps
                        ).then(data => {
                            this.$message({
                                type: 'success',
                                message: '添加成功!'
                            });
                            this.$router.push({ path: '/userManage' });
                            // 整页刷新
                            this.$store.dispatch('UpdateCache'); 
                        });
                        
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消添加'
                        });
                    });
                } else {
                    return false;
                }
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.app-container {
  position: relative;
  padding: 20px 20px 10px;
  .content {
    position: relative;
    padding: 0 50px;
    background: #fff;
    box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    .title {       
      position: relative;
      font-size: 14px;
      color: rgb(106, 85, 72);
      padding-left: 16px;
      margin: 30px 0;
      display: block;
      &::after {
        position: absolute;
        content:'';
        width: 4px;
        height: 14px;
        background: #ff5e2c;
        left: 0;
        top: 3px;
      }
    }
    form {
      
      margin-bottom: 80px;
    }
    .input-hidden {
        visibility: hidden;
        position: absolute;
        z-index: -1;
    }
  }
}
.top-title{
    padding-top:8px;
    text-align: center;
    font-size: 18px;
    color: #333;
    line-height: 72px;
    font-weight: bold;
    font-family: Microsoft YaHei;
    border-bottom: 1px solid #ddd;
}
.describe {
  color: #999;
  font-size: 14px;
  line-height: 36px;
}
.dialog-footer {
  text-align: center;
  padding: 30px 0;
  margin-top: 70px;
}
</style>

